<template>
  <div class="signUp">
    <!--  导航开始 -->
    <commonHeader
      :title="title"
      @goBack="goBack()">
    </commonHeader>
    <!--      报名表单-->
    <div class="content">
      <!--    身份证-->
      <div class="idCard borderBottom flex-space-between">
        <!--      身份证正面-->
        <upload :type="typeFront" @getUploadParam="getUploadParam"></upload>
        <!--      身份证背面-->
        <upload :type="typeBehind" @getUploadParam="getUploadParam"></upload>
      </div>
      <!--    联系电话-->
      <div class="phone borderBottom flex-space-between">
        <div>联系电话</div>
        <input
          type="number"
          v-model="phone"
          maxlength="11"
          oninput="if(value.length>11)value=value.slice(0,11)"
          @blur="onBlurInput()"
          placeholder="请输入您的手机号">
      </div>
      <!--    再次输入-->
      <div class="phone phoneAgain borderBottom">
        <div class="flex-space-between">
          <div>再次输入</div>
          <input
            type="number"
            v-model="phoneAgain"
            maxlength="11"
            oninput="if(value.length>11)value=value.slice(0,11)"
            @blur="onBlurInput(2)"
            placeholder="请再次输入您的手机号">
        </div>
        <div v-if="phoneTipsShow" class="phoneTips">两次手机号不一致，请重新输入</div>
      </div>

      <!--    兴趣偏好-->
      <div class="labelList borderBottom">
        <!--      标题-->
        <div class="title flex-space-between">
          <div>兴趣偏好<span>(可多选)</span></div>
          <div @click="chooseMoreLabel()">更多</div>
        </div>
        <!--      标签内容-->
        <div class="content flex-start">
          <div class="labelListItems flex-space-center"
               :class="{'activityLabel':item.checked}"
               v-for="(item,index) in interestList"
               :key="index"
               @click="changeLabel(item,index)">
            {{ item.name }}
          </div>
        </div>
      </div>
      <!--    健康状况-->
      <div class="labelList borderBottom">
        <!--      标题-->
        <div class="title flex-space-between">
          <div>健康状况</div>
          <div class="flex-end">
            <van-switch v-model="checked" size="24px" @input="onInput"/>
          </div>
        </div>
        <!--标签内容-->
        <div v-show="checked" class="content flex-start">
          <div class="labelListItems flex-space-center"
               :class="{'activityLabel':item.checked}"
               v-for="(item,index) in healthyList"
               :key="index" @click="changeLabel(item,index)">
            {{ item.name }}
          </div>
        </div>
      </div>
      <!--    终身教育费用-->
      <div class="money borderBottom flex-space-between">
        <div>终身教育费用</div>
        <div class="price">￥{{singupConfig.price | priceFilter}}</div>
      </div>
      <!--    提示-->
      <router-link to="agreement" class="tips borderBottom flex-end">
        <img src="http://job.dayinyun.com/whyIcon.png" alt="">
        <span>如矿金不足将向系统预借</span>
      </router-link>

      <!--      报名须知-->
      <div v-if="singupConfig.notice" class="signUpNotes">
        <h3>报名须知</h3>
        <p>{{singupConfig.notice}}</p>
      </div>
      <!--    按钮-->
      <div class="button flex-start">
        <button class="price" @click="testSubmite(0)">
          原价报名
          <span>（￥{{singupConfig.price | priceFilter}}）</span>
        </button>
        <button class="linePrice flex-space-center" @click="testSubmite(1)">{{pointNum}}矿金抵款报名实名￥{{((singupConfig.price*1-singupConfig.deduction_price*1)*1>0?singupConfig.price*1-singupConfig.deduction_price*1:0) | priceFilter}}</button>
      </div>
    </div>
    <!--    更多兴趣爱好弹框-->
    <van-overlay :show="moreLabelShow">
      <labels :labelList="interestList" @changeLabel="changeLabel" @compareLabel="compareLabel"></labels>
    </van-overlay>
  </div>
</template>

<script>
  import upload from "../../components/upload.vue"
  import labels from "../../components/labels.vue"
  import commonHeader from "../../components/common/commonHeader.vue"
  import {GETTAGLIST,GETSINGUPCONFIG,SUBMITSINGUP} from "../../apis/oldUniversity"
  export default {
    components:{
      upload,
      labels,
      commonHeader
    },
    data() {
      return {
        title:"国开老年大学",//导航名字
        typeFront:1,//身份证 正面
        typeBehind:2,// 身份证 背面
        urlFront:'',//身份证 正面图片路径
        urlBehind:'',// 身份证 背面图片路径
        interestList:[],//兴趣爱好标签数组
        healthyList:[],//健康状况数组
        interestIndex:0,//兴趣爱好标签默认选中下标
        healthyIndex:0,//健康状态标签默认选中下标
        checked:false,//开关
        phone:'',//手机号
        phoneAgain:'',//再次手机号
        phoneTipsShow:false,//手机号不一致提示
        singupConfig:{},//报名配置
        pointNum:0,//矿金数
        moreLabelShow:false,//更多标签
        school_id:'',//学校id

      }
    },
    mounted() {
      // 报名成功后回来页面刷新
      window.onpageshow = function(e) {
        console.log("执行了onpageshow");
        if (
          e.persisted ||
          (window.performance && window.performance.navigation.type == 2)
        ) {
          window.location.reload();
        }
      };
      this.title = this.$route.query.title&&this.$route.query.title!='undefined'?this.$route.query.title:"国开老年大学"
      this.school_id = this.$route.query.id?this.$route.query.id:""
      // 获取报名配置
      this.getSingupConfig()
      // 获取标签页
      this.getTagList(1)//兴趣
      this.getTagList(2)//健康
    },
    methods:{
      // 返回
      goBack(){
        if(this.getsesStore('fullPath')){
          this.$router.push({path:this.getsesStore('fullPath'),query:{tabIndex:1}});
          // this.removesesStore('fullPath');
        }
      },
      // 切换标签
      changeLabel(item,index){
        item.checked = !item.checked ;
      },
      // 选择更多兴趣爱好标签
      chooseMoreLabel(){
        this.moreLabelShow = true;
      },
      // 完成按钮
      compareLabel(list){
        this.interestList = list;//赋值选择后的数组
        this.moreLabelShow = false;//标签弹框隐藏
      },
      // 健康状况 开关
      onInput(checked){
        this.checked = checked;
        this.getTagList(2);
      },
      // 获取是否上传成功身份证
      getUploadParam(url,type){
        if(type*1==1){
          this.urlFront = url
        }else{
          this.urlBehind = url
        }
      },
      // 手机号失去焦点
      onBlurInput(type){
        // window.scroll(0, 0);
        if(type*1==2){
          if(this.phone!=this.phoneAgain){
            this.phoneAgain = ""
            this.phoneTipsShow = true;//提示显示
          }
        }
      },
      // 验证提交数据
      testSubmite(orderType){
        if(!this.urlFront){
          this.$toast("请上传身份证正面照！")
        }else if(!this.urlBehind){
          this.$toast("请上传身份证背面照！")
        }else if(!this.phone){
          this.$toast("请输入手机号！")
        }else if(!this.phoneAgain){
          this.$toast("请再次输入手机号！")
        }else{
          // orderType 1 原价 2 矿金抵扣
          this.submitOrder(orderType)
        }
      },

      //-------------------------- 接口开始 --------------------
      // 获取报名配置
      getSingupConfig(){
        let getSingupConfig = GETSINGUPCONFIG
        getSingupConfig().then( res => {
          if(res.data.code*1===200){
            this.singupConfig = res.data.data;
            // 矿金数
            this.pointNum = this.singupConfig.need_point*1>10000?this.singupConfig.need_point*1/10000 + '万':this.singupConfig.need_point*1
          } else {
            this.$toast(res.data.message);
          }
        }).catch(error => {
          console.log(error)
        })
      },
      // 获取标签页
      getTagList(tagType){
        let getTagList = GETTAGLIST
        // 参数
        let params = {
          type:tagType,//类型 1兴趣偏好标签 2老年病标签 3专业
        }
        getTagList(params).then( res => {
          if(res.data.code*1===200){
            if(tagType*1==1){
              this.interestList = res.data.data;//兴趣爱好标签
              // 向标签数组添加checked属性
              this.interestList.forEach((item,index) =>{
                this.$set(item,'checked',index*1==0?true:false)
              })
            }else{
              this.healthyList = res.data.data;//健康状况标签
              // 向标签数组添加checked属性
              this.healthyList.forEach((item,index) =>{
                this.$set(item,'checked',index*1==0?true:false)
              })
            }

          } else {
            this.$toast(res.data.message);
          }
        }).catch(error => {
          console.log(error)
        })
      },
      // 提交订单
      submitOrder(orderType){
        // orderType 1 原价 2 矿金抵扣
        var interestList = [];//兴趣爱好
        var healthyList = [];//健康状况
        this.interestList.forEach((item,index) =>{
          if(item.checked){
            interestList.push(item.id)
          }
        })
        this.healthyList.forEach((item,index) =>{
          if(item.checked){
            healthyList.push(item.id)
          }
        })
        // console.log(this.school_id)
        let params = {
          type:orderType,//0原价购买 1矿金抵扣
          tel:this.phone,//手机号
          just_img:this.urlFront,//身份证正面
          back_img:this.urlBehind,//身份证背面
          tids:interestList.toString(),//兴趣爱好标签ID，多个用逗号隔开
          healthy_status:this.checked?1:0,//健康状态 0健康 1有老年病
          hids:healthyList.toString(),//老年病标签ID，多个用逗号隔开
          pay_price:orderType*1==0?this.singupConfig.price:this.singupConfig.price*1-this.singupConfig.deduction_price*1,//总支付价格
          school_id:this.school_id,//学校id
        }
        let submitSingup = SUBMITSINGUP
        submitSingup(params).then( res => {
          if(res.data.code*1===200){
            window.location.href = res.data.data.pay_url;//跳转第三方支付
            // window.location.href="https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx0709551013587293427c90971749150600&package=4185204733"
          } else {
            this.$toast(res.data.message);
          }
        }).catch(error => {
          console.log(error)
        })

      },
      // --------------------------接口结束 -------------------
    },
    watch:{

    }
  }
</script>

<style lang="less" scoped>
  @import (reference) url(../../assets/less/common);
  .signUp{
    width:100%;
    padding:1.38rem 0.3rem 1.5rem 0.3rem;
    box-sizing: border-box;
    .content{
      .head{
        width:100%;
        padding:0.3rem 0;
        box-sizing: border-box;
        font-size: @fontSize34;
        font-family: @fontFamily500;
        font-weight: @fontWeight400;
        color:@whiteColor;
        .headImg{
          width:1.13rem;
          height:1.13rem;
          border-radius: 50%;
          background: #232323;
          img{
            width:0.6rem;
            height:auto;
          }
        }
        img.rightIcon{
          width:0.13rem;
          height: auto;
          margin-left:0.2rem;
        }
      }
      .idCard{
        width:100%;
        padding:0.3rem 0;
        box-sizing: border-box;
        div{
          width:3.35rem;
          height:2.3rem;
          background:#232323;
          border-radius: 0.1rem;
          flex-direction: column;
          font-size: @fontSize28;
          font-family: @fontFamily500;
          font-weight: @fontWeight400;
          color:@whiteColor;
          img{
            width:1.56rem;
            height:auto;
            margin-bottom:0.16rem;
          }
        }
      }
      .phone{
        padding:0.3rem 0;
        box-sizing: border-box;
        font-size: @fontSize34;
        font-family: @fontFamily500;
        font-weight: @fontWeight400;
        color:@whiteColor;
        input{
          flex:1;
          margin-left: 0.2rem;
          background:none;
          text-align: right;
        }
        input::-webkit-input-placeholder {color:rgba(255,255,255,0.32);text-align: right;}
        input::-moz-placeholder { color:rgba(255,255,255,0.32); text-align: right;} /* firefox 19+ */
        input:-ms-input-placeholder { color:rgba(255,255,255,0.32);text-align: right; } /* Internet Explorer 10+ */
        input:-moz-placeholder { color:rgba(255,255,255,0.32); text-align: right;} /* firefox 14-18 */
        .phoneTips{
          font-size: @fontSize24;
          font-family: @fontFamily500;
          font-weight: @fontWeight400;
          color:#FD0000;
          margin-top:0.06rem;
        }
      }
      .labelList{
        padding:0.3rem 0;
        box-sizing: border-box;
        .title{
          font-size: @fontSize34;
          font-family: @fontFamily500;
          font-weight: @fontWeight400;
          color:@whiteColor;
          margin-bottom: 0.2rem;
          span{
            font-size: @fontSize30;
          }
          /deep/.van-switch--on{
            background-color:#FEA300;
          }
        }
        .content{
          width:100%;
          height:1.3rem;
          overflow-y: hidden;
          flex-wrap: wrap;
          .labelListItems{
            min-width: 1.26rem;
            height:0.56rem;
            padding:0.08rem 0.32rem;
            box-sizing: border-box;
            border-radius: 0.28rem;
            background: #232323;
            margin-right:0.2rem;
            margin-bottom: 0.2rem;
            font-size: @fontSize28;
            font-family: @fontFamily500;
            font-weight: @fontWeight400;
            color:@whiteColor;
          }
          .activityLabel{
            min-width: 1.26rem;
            height:0.56rem;
            background: #FFE600;
            color:#4B4620;
          }
        }
      }
      .money{
        width:100%;
        padding:0.3rem 0;
        box-sizing: border-box;
        font-size: @fontSize34;
        font-family: @fontFamily500;
        font-weight: @fontWeight400;
        color:@whiteColor;
        .price{
          color:#FD0000;
        }
      }
      .tips{
        width:100%;
        padding:0.23rem 0;
        box-sizing: border-box;
        font-size: @fontSize28;
        font-family: @fontFamily500;
        font-weight: @fontWeight400;
        color:rgba(255,255,255,0.8);
        img{
          width:0.26rem;
          height:auto;
          margin-right:0.1rem;
        }
        span{
          color:#ffffff;
        }
      }
      .signUpNotes{
        padding:0.3rem 0;
        box-sizing: border-box;
        h3{
          font-size: @fontSize32;
          font-family: @fontFamily500;
          font-weight: @fontWeight400;
          color:#FFFFFF;
        }
        p{
          font-size: @fontSize32;
          font-family: @fontFamily500;
          font-weight: @fontWeight400;
          color:#FFFFFF;
          line-height: 0.5rem;
          text-align: justify;
        }
      }
      .button{
        position: fixed;
        bottom: 0;
        left:0;
        right:0;
        z-index: 1;
        height:0.98rem;
        font-size:@fontSize32;
        font-family:@fontFamily500;
        color:@whiteColor;
        button.price{
          width:2.4rem;
          height:100%;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          flex-direction: column;
          background: #FEA300;
        }
        button.linePrice{
          flex:1;
          height:100%;
          background: #FD0000;
        }
      }
      .borderBottom{
        border-bottom: 0.02rem solid rgba(255,255,255,0.4);
      }
    }
    /deep/.van-overlay{
      z-index:110;
      background:#000000;
    }

  }
</style>
